<script setup lang="ts">

</script>

<template>
<div class="whole">
    <div class="title">
        <van-icon name="comment-o" size="20" style="margin-right: 3px"/>
        <span>咨询方式</span>
    </div>
    <div class="allMethod">
        <div class="Offline">
            <van-icon name="chat" size="20"/>
            <p>线下咨询</p>
        </div>
        <div class="phone">
            <van-icon name="phone" size="20"/>
            <p>电话咨询</p>
        </div>
        <div class="network">
            <van-icon name="chat" size="20"/>
            <p>网络咨询</p>
        </div>
    </div>
</div>
</template>

<style scoped lang="less">
.whole {
  width: 90%;
  margin: 5vh auto;
    .allMethod {
        margin-top: 3vh;
        display: flex;
        justify-content: space-between;
        p {margin: 0}
        .Offline {
            border: 1px solid #7246c5;
            color: #7246c5;
            text-align: center;
            background-color: white;
            border-radius: 20px;
            height: 13vh;
            width: 30%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
        .phone,.network {
            text-align: center;
            background-color: #C4C4C4;
            border-radius: 20px;
            height: 13vh;
            width: 30%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
    }
}

</style>